<template>
    <template>
        <slot name="url">
            <li	class="col-3 p-0 d-inline-block activity-panel position-relative border-right text-center" 
                :class="{'border-left':index==0}" style="height: 390px">
                <span	class="position-absolute activity-panel-badge px-2 py-05 rounded-1" 
                        :class="value.badge[1]">{{value.badge[0]}}</span>
                <a href="#" class="position-absolute mt-5 mb-3 z-index-2 w-100 text-center left-0">
                    <img style="width: 206px" class="item-img" :class="value.code" :src="getHotForum(value)" alt="">
                </a>
                <div class="info position-absolute w-100" style="top: 16rem;">
                    <h6>{{value.name}}</h6>
                    <span class="commit" :class="value.code+'commit'" v-html="value.commit[0]"></span>
                </div>
                <ul class="colors p-0 my-1 w-100 position-absolute z-index-2" :class="value.code+'colors'" style="top: 19rem;">
                    <template v-for="(val, index) in value.colors">
                        <li class="d-inline-block"
                            @mouseover="indexActive(value, val, index)">
                            <div class="rounded-circle mx-1 colors-item" :class="{'active':index==0}">
                                <span class="rounded-circle d-block" :style="{background: val}"></span>
                            </div>
                        </li>
                    </template>
                </ul>
                <div class="mt-2 mb-3 w-100 monery-info position-absolute" style="top: 21rem;">
                    <span class="monery d-inline">{{value.monery}}.00</span>
                    <span v-if="value.oldmonery" class="oldmonery">{{value.oldmonery}}.00</span>
                </div>
                <div class="mt-2 mb-3 w-100 shopping-info z-index-2 mx-auto position-absolute" style="bottom: 0">
                    <a class="see-detail btn btn-sm btn-light border">查看详情</a>
                    <a class="add-shopping-cart btn btn-sm btn-primary text-white">加入购物车</a>
                </div>
                <a class="d-inline-block w-100 h-100 z-index-1 position-absolute left-0 top-0 activity-panel-border"></a>
            </li>
        </slot>
    </template>
</template>

<script>
export default {
    name: 'ForumLi',
    data () {
        return {

        }
    }
}
</script>

<style>

</style>

